<template>
	<view class="page">
		<view class="navbar-wrap">
			<WalletNavbar :balanceObj="balanceObj"></WalletNavbar>
		</view>

		<view class="balance_list-wrap tp-w690">
			<view class="common_tit-wrap">
				<view class="l-wrap">余额明细</view>
				<view class="r-wrap"></view>
			</view>

			<WalletNavbarSwiper ref="navbarSwiper" :navbarList="navbarList" :height="'88rpx'" :swiperHeight="'500rpx'"
			 :curNavbar="curNavbar" :dateList="dateList" @handleChooseNavbar="handleChooseNavbar" @handleScrolltolower="handleScrolltolower"
			 @handleRefresherrefresh="handleRefresherrefresh"></WalletNavbarSwiper>
		</view>
	</view>
</template>

<script>
	import WalletNavbar from '@/components/mine/wallet-navbar.vue'
	import WalletNavbarSwiper from '@/components/user/wallet-navbarSwiper.vue'
	export default {
		components: {
			WalletNavbar,
			WalletNavbarSwiper
		},
		data() {
			return {
				paddingHeight: 0,
				navbarList: [{
						name: '全部',
						alias: 'all'
					},
					{
						name: '充值',
						alias: 'recharge'
					},
					{
						name: '提现',
						alias: 'withdraw'
					},
					{
						name: '消费',
						alias: 'consume'
					},
					{
						name: '退款',
						alias: 'refund'
					},
					{
						name: '佣金',
						alias: 'commission'
					}
				],
				curNavbar: {
					name: '全部',
					alias: 'all'
				},
				allList: [],
				rechargeList: [],
				withdrawList: [],
				consumeList: [],
				refundList: [],
				commissionList: [],
				curIndex: 0,
				balanceObj: {
					balance: 0, // 账户余额
					commossionBalance: 0, // 佣金余额
					totalBalance: 0, // 总余额
				},
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 10,
				},
			};
		},
		onLoad() {
			this.getPaddingHeight()
		},
		onShow() {
			this.getList()
			this.getUserBalance()
		},
		computed: {
			dateList() {
				return [this.allList, this.rechargeList, this.withdrawList, this.consumeList, this.refundList, this.commissionList]
			}
		},
		methods: {
			// 切换swiper
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curIndex = i
				this.page.pageNum = 1
				this.getList()
			},
			// 滚动到底部
			handleScrolltolower(item, i) {
				let totalPage = Math.ceil(this.page.totalPageNum / this.page.pageSize)
				if (this.page.pageNum >= totalPage) return
				this.page.pageNum++
				this.getList()
			},
			// 下拉刷新
			handleRefresherrefresh(item, i) {
				this.page.pageNum = 1
				this.getList()
			},
			getPaddingHeight() {
				let _this = this
				uni.getSystemInfo({
					success(res) { // res - 各种参数
						let info = uni.createSelectorQuery().select(".navbar-wrap");
						info.boundingClientRect(function(data) { //data - 各种参数
							_this.paddingHeight = data.height
						}).exec()
					}
				});
			},
			getUserBalance() {
				this.$http.get(this.$api.customerAccountMoney).then(res => {
					if (res.code === 200) {
						this.balanceObj.balance = res.data.balance
						this.balanceObj.totalBalance = res.data.zBalance
						this.balanceObj.commossionBalance = res.data.yongBalance
					}
				})
			},
			getList() {
				let type = Number(this.curIndex) === 5 ? 5 : Number(this.curIndex) === 0 ? 4 : Number(this.curIndex) - 1

				this.$http.get(this.$api.balanceHistory, {
					type,pageNum:this.page.pageNum,pageSize:this.page.pageSize
				}).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						let resdata = res.data.result
						this.$refs.navbarSwiper.stopPullDownRefresh()
						switch (type) {
							case 0:
								this.rechargeList = this.page.pageNum == 1 ? resdata : [...this.rechargeList, ...resdata]
								break
							case 1:
								this.withdrawList = this.page.pageNum == 1 ? resdata : [...this.withdrawList, ...resdata]
								break
							case 2:
								this.consumeList = this.page.pageNum == 1 ? resdata : [...this.consumeList, ...resdata]
								break
							case 3:
								this.refundList = this.page.pageNum == 1 ? resdata : [...this.refundList, ...resdata]
								break
							case 4:
								this.allList = this.page.pageNum == 1 ? resdata : [...this.allList, ...resdata]
								break
							case 5:
								this.commissionList = this.page.pageNum == 1 ? resdata : [...this.commissionList, ...resdata]
								break
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		background-color: #f5f5f5;
	}

	.balance_list-wrap {
		// height: 668rpx;
		border-radius: 20rpx;
		background-color: #fff;
		z-index: 3;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 120rpx;
		/* #endif */
		/* #ifdef H5 */
		top: -50rpx;
		/* #endif */
		left: 50%;
		transform: translateX(-50%);
		margin-top: 650rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.common_tit-wrap {
			margin: 30rpx;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
</style>
